<template>
	<view class="container bg-w">
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="施工资料">
				<template slot='left'>
					<view class="flex width-100 ">
						<i class='iconfont iconfanhui' @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="position-r-top margin-b-50">
			<view class="construction-data ">
				<view class="form-list flex flex-between height-40 border-bottom algin-i-c">
					<text class="color-6 wid-80">测点名称</text>
					<text class="tr">{{ equipmentData.gaugingPoint }}</text>
				</view>
				<view>
					<view v-show="equipmentData.equipmentId" class="form-list flex flex-between height-40 border-bottom">
						<text class="color-6 ">设备id</text>
						<text>{{ equipmentData.equipmentId }}</text>
					</view>
					<view v-show="equipmentData.equipmentName" class="form-list flex flex-between height-40 border-bottom">
						<text class="color-6 ">设备名称</text>
						<text>{{ equipmentData.equipmentName }}</text>
					</view>
					<view v-show="equipmentData.equipmentType" class="form-list flex flex-between height-40 border-bottom">
						<text class="color-6 ">设备类型</text>
						<text>{{ equipmentData.equipmentTypeName }}</text>
					</view>
				</view>
				<view class="form-list flex flex-between height-40 border-bottom">
					<text class="color-6 ">规范模板</text>
					<text>{{ equipmentData.name }}</text>
				</view>
				<view v-show="equipmentData.chargeUserName" class="form-list flex flex-between height-40 border-bottom">
					<text class="color-6 ">施工负责人</text>
					<text>{{ equipmentData.chargeUserName }}</text>
				</view>
				<view v-show="equipmentData.reportName" class="form-list flex flex-between height-40 border-bottom">
					<text class="color-6 ">上报人员</text>
					<text>{{ equipmentData.reportName }}</text>
				</view>
				<view v-show="equipmentData.postAddr" class="form-list flex flex-between height-40 border-bottom">
					<text class="color-6 ">上报位置</text>
					<text>{{ equipmentData.postAddr }}</text>
				</view>
				<view v-show="equipmentData.reportTime" class="form-list flex flex-between height-40 border-bottom">
					<text class="color-6 ">上报时间</text>
					<text>{{ equipmentData.reportTime }}</text>
				</view>
				<view v-show="equipmentData.remarks" class="form-list flex flex-between height-40 border-bottom">
					<text class="color-6 ">备注信息</text>
					<text>{{ equipmentData.remarks }}</text>
				</view>
				<view class="form-list">
					<view class="" v-for="(item,index) in attachementVos" :key='index'>
						<text class="dis-block margin-t-10">{{item.stepName}}</text>
						<text class="dis-block margin-t-10 margin-b-10">{{item.standard}}</text>
						<view class="fileAll">
							<view class="image-view position-r demonstration" @click='showImgsf(item)'>
								<view class="example-text">示范图片</view>
								<image class="" :src="item.imgUrl" mode=""></image>
							</view>
							<block v-for="(ImgItem,ImgIndex) in item.imgList" :key='ImgIndex' v-show="item.imgList.length > 0">
								<view class="image-view">
									<image :src="ImgItem.imgUrl" mode="" @click='showImg(ImgItem)'></image>
								</view>
							</block>
							<block v-for="(VideoItem,VideoIndex) in item.videoList" :key='VideoIndex'>
								<view class="image-view" v-show="item.videoList.length>0">
									<video v-show="!videoShow" :src="VideoItem.videoUrl" :class="{'dis_none':hideVideo}" :controls="false" :show-center-play-btn="false" autoplay>
										<cover-view v-show="!videoShow" @tap="videoShow=!videoShow" style="height: 100%;width: 100%;"></cover-view>
									</video>
									<view v-show="videoShow" class="full-video">
										<video @tap="videoShow=!videoShow" :src="VideoItem.videoUrl" :class="{'dis_none':hideVideo}"
										 :show-center-play-btn="false" :controls='true' autoplay>
										</video>
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
				<scroll-view class="construction-footer flex" v-if="auditStatus==3">
					<button type="text" @click="rejectModalShow=true">驳回</button>
					<button type="text" @click="resolve">通过</button>
				</scroll-view>
			</view>
			<uni-modal v-show="rejectModalShow">
				<div class="uni-mask"></div>
				<div class="uni-modal">
					<div class="uni-modal__hd"><strong class="uni-modal__title">审批驳回</strong></div>
					<div class="uni-modal__bd">
						<textarea class="opinion-text" placeholder="请输入审批驳回意见..." v-model="auditReason" />
						</div>
					<div class="uni-modal__ft">
						<div class="uni-modal__btn uni-modal__btn_default" style="color: rgb(0, 0, 0);" @click="rejectModalShow=false"> 取消 </div>
						<div class="uni-modal__btn uni-modal__btn_primary" style="color: rgb(0, 122, 255);" @click="reject"> 确定 </div>
					</div>
				</div>
				<!---->
			</uni-modal>
			<uni-popup ref="imgpopup" type="center">
				<view class="popup-view">
					<view class="popup-imgAll">
						<!-- <image :style="{'width': imgW,'height': imgH}" :src="imgUrl" @touchstart="start" @touchend="end" @click="closeImg"></image> -->
						<image :style="{'width': imgW,'height': imgH}" :src="imgUrl"  @click="closeImg"></image>
					</view>
				</view>
			</uni-popup>	
		</view>
	</view>
</template>

<script>
	import { equipmentDetail, auditReject, auditPass } from '@/common/api/map'
	import {getFileInfo,equipmentTypeAll} from '@/common/api/api.js'
	import ipConfig from '@/utils/ipConfig.js'
	export default {
		data() {
			return {
				standardProId: '',
				standardId: '',
				auditReason: '',
				auditStatus: 0,
				equipmentData: {},
				rejectModalShow: false,
				imgList:[],
				videoList:[],
				videoShow: false,
				attachementVos:[],
				previewImageAll:[],
				clientX:0,
				clientY:0,
				imgUrl:'',
				imgIndex:0,
				hideVideo:false,
				imgH:null,
				imgW:null,
				screenWidth:null,
				screenHeight:null,
			}
		},
		onLoad(params) {
			this.screenWidth = uni.getSystemInfoSync().screenWidth
			this.screenHeight = uni.getSystemInfoSync().screenHeight
			this.standardProId = params.standardProId;
			this.standardId = params.standardId;
			this.auditStatus = params.auditStatus
			this.loadEquipmentData();
		},
		methods: {
			loadEquipmentData() {
				equipmentDetail({
					standardProId: this.standardProId,
					standardId: this.standardId
				}).then((res)=> {
					if (res.data){
							this.equipmentData = res.data;
							this.attachementVos = res.data.attachementVos
							if (this.equipmentData.equipmentType) {
								equipmentTypeAll('equipment_type').then(res => {
									res.data.forEach(obj => {
										if (obj.id == this.equipmentData.equipmentType) {
											this.equipmentData.equipmentTypeName = obj.label
										}
									})
								})
							}
							this.attachementVos.forEach(obj => {
								getFileInfo(obj.attachmentId).then(res => {
									let imgUrl = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res)
									this.$set(obj, 'imgUrl', imgUrl)
								})
								this.$set(obj,'imgList',[])
								this.$set(obj,'videoList',[])
								if(obj.buildPostDetails){
									obj.buildPostDetails.forEach(obj2 => {
										if(obj2.fileType == 0){
											getFileInfo(obj2.attachment).then(res2 => {
												let imgUrl2 = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res2)
												obj.imgList.push({
													imgUrl:imgUrl2,
													attachment:obj2.attachment,
													stepId: obj2.stepId,
												})
											})
										}else{
											// let videoUrl = window.URL.createObjectURL(new Blob([res2]))//将数据流转blob预览
											obj.videoList.push({
												videoUrl: `${ipConfig.ip}admin/sys-file/getFileById?id=${obj2.attachment}`,
												attachment:obj2.attachment,
												stepId: obj2.stepId,
											})
										}
									})
								}
							})
					} 
				})
			},
			reject() {
				if(this.auditReason == ''){
					uni.showToast({
						title: '驳回意见不能为空',
						icon: 'none'
					})
				}else{
					auditReject({
						auditReason: this.auditReason,
						standardProId: this.standardProId,
						detailedProId: this.equipmentData.detailedProId,
						submitNumber: this.equipmentData.submitNumber
					}).then((res)=> {
						if(res.code == 20000){
							this.rejectModalShow = false;
							uni.showToast({
								title: '驳回成功',
								icon: 'none'
							})
							setTimeout(()=>{
								uni.navigateBack({ delta: 1 });
							},1000)
						}
					})
				}
			},
			resolve() {
				uni.showModal({
					title: '提示',
					content: '是否通过该设备',
					success: (res)=> {
						if (res.confirm) {
							auditPass({
								standardProId: this.standardProId,
								detailedProId: this.equipmentData.detailedProId,
								submitNumber: this.equipmentData.submitNumber
							}).then((res)=> {
								if(res.code == 20000){
									uni.showToast({
										title: '通过成功',
										icon: 'none'
									})
									setTimeout(()=>{
										uni.navigateBack({ delta: 1 });
									},1000)
								}
							})
						} else if (res.cancel) {
							
						}
					}
				});
			},
			calculate(w, h, pw, ph) {	//canvas图片自适应居中
				console.log(w,h,pw,ph)
				let px = 0;
				let py = 0;
				if(pw < w && ph < h){
						px = 0.5 * w - 0.5 * pw;
						py = 0.5 * h - 0.5 * ph;
				}else if (ph / pw > h / w) {
						let uu = ph;
						ph = h
						pw = pw * h / uu
						px = 0.5 * w - 0.5 * pw;
				} else {
						let uu = pw;
						pw = w;
						ph = ph * pw / uu
						py = 0.5 * h - 0.5 * ph;
				}
				return {px, py, pw, ph}
			},
			showImgsf(item){
				this.imgUrl = '';
				this.$refs.imgpopup.open();
				uni.getImageInfo({
					src: ipConfig.ip + 'admin/sys-file/getFileById?id='+item.attachmentId,
					success: (image)=> {
						this.imgWidth = image.width;
						this.imgHeight = image.height;
						let imgInfo = this.calculate(this.screenWidth,this.screenHeight, image.width, image.height);
						this.imgH = imgInfo.ph+'px';
						this.imgW = imgInfo.pw+'px';
						this.imgUrl = item.imgUrl;
					}
				});
			},
			//预览图片
			showImg(item){
				this.imgUrl = '';
				this.$refs.imgpopup.open();
				this.hideVideo = true
					this.attachementVos.forEach((obj,index) => {
						if(item.stepId == obj.stepId){
							uni.getImageInfo({
									src: ipConfig.ip + 'admin/sys-file/getFileById?id='+item.attachment,
									success: (e) => {
										let imgInfo = this.calculate(this.screenWidth,this.screenHeight-50,e.width,e.height);
										this.imgH = imgInfo.ph+'px';
										this.imgW = imgInfo.pw+'px';
										this.imgUrl = item.imgUrl
									}
							});
						}
					})
			},
			closeImg(){
				this.hideVideo = false
				this.$refs.imgpopup.close();
			},
			start(e){
				this.clientX=e.changedTouches[0].clientX;
				this.clientY=e.changedTouches[0].clientY;
			},
			end(e){
				const subX=e.changedTouches[0].clientX-this.clientX;
				const subY=e.changedTouches[0].clientY - this.clientY;
				
				if(subX>80){
					if(this.imgIndex <= this.previewImageAll.length-1 && this.imgIndex > 0){
						this.imgIndex--
					}else{
						this.imgIndex = this.previewImageAll.length - 1
					}
					this.imgUrl = this.previewImageAll[this.imgIndex]
				}else if(subX<-80){
					if(this.imgIndex == this.previewImageAll.length -1){
						this.imgIndex = 0
					}else{
						this.imgIndex++
					}
					this.imgUrl = this.previewImageAll[this.imgIndex]
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.form-list { padding: 0 3%; }

	.opinion-text {
		height: 100px;
		text-align: left;
	}
	
	// .fileAll{
	// 	uni-image,uni-video{width: 48%;margin-right: 2%;height: 300rpx;border: 1px solid #eee;box-sizing: border-box;float: left;margin-bottom: 20rpx;}
	// 	uni-image:nth-child(2n){margin-right: 0;}
	// }
	.fileAll{
		width: 100%;
		overflow: hidden;
		.image-view{
			width: 48%;
			margin-right: 4%;
			height: 300rpx;
			border: 1px solid #eee;
			box-sizing: border-box;
			float: left;
			margin-bottom: 20rpx;
			position: relative;
			uni-image,uni-video{
				width: 100%;
				height: 100%;
			}
			>.example-text{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9;
				width: 100%;
				height: 100% !important;
				background-color: rgba(0, 0, 0, 0.4);
				color: #f2f2f2;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.image-view:nth-child(2n){margin-right: 0;}
		.full-video{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			z-index: 999;
		}
		.full-video /deep/ .uni-video-container{height: 260px;top: 50%;left: 0;transform: translateY(-50%);}
	}
	.construction-footer {
		width: -webkit-fill-available;
		height: 80rpx;
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// z-index: 999;
		
		/deep/ .uni-scroll-view-content{display: flex;}
		button {
			font-size: 28rpx;
			color: #fff;
			width: 50%;
			line-height: 80rpx;
			border-radius: 0;
		}
		button:first-child {
			background-color: #fa5959;
			border-right: 1px solid #fff;
		}
		button:last-child {
			background-color: #09AAE9;
		}
	}
	.mt--5 {
		margin-top: -10rpx;
	}
	uni-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:block;box-sizing:border-box}
	uni-modal .uni-mask{position:fixed;z-index:999;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.5)}
	uni-modal .uni-modal{position:fixed;z-index:999;width:80%;max-width:300px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#fff;text-align:center;border-radius:3px;overflow:hidden}
	uni-modal .uni-modal *{box-sizing:border-box}uni-modal .uni-modal__hd{padding:1em 1.6em .3em}
	uni-modal .uni-modal__title{font-weight:400;font-size:18px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
	uni-modal .uni-modal__bd,uni-modal .uni-modal__title{word-wrap:break-word;word-break:break-all;white-space:pre-wrap}
	uni-modal .uni-modal__bd{padding:1.3em 1.6em 1.3em;min-height:40px;font-size:15px;line-height:1.4;color:#999;max-height:400px;overflow-y:auto}
	uni-modal .uni-modal__ft{position:relative;line-height:48px;font-size:18px;display:-webkit-box;display:-webkit-flex;display:flex}
	uni-modal .uni-modal__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #d5d5d6;color:#d5d5d6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}
	uni-modal .uni-modal__btn{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;cursor:pointer}
	uni-modal .uni-modal__btn:active{background-color:#eee}
	uni-modal .uni-modal__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1px solid #d5d5d6;color:#d5d5d6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleX(.5);transform:scaleX(.5)}
	uni-modal .uni-modal__btn:first-child:after{display:none}uni-modal .uni-modal__btn_default{color:#353535}uni-modal .uni-modal__btn_primary{color:#007aff}
</style>
